<template>
  <div id="app">
    <div class="home_page" id="npm">
      <div class="banner_box">
        <swiper :options="swiperOptionrecomm" class="recommandlist" ref="mySwiper" v-if="bannerlist.length > 0">
          <swiper-slide v-for="(item,index) in bannerlist" :key="index" class="slides">
            <img :src="item.pics_url" alt class="pics_url" @click="goUrl(item)"/>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <div class="search_tab">
        <!-- <div class="Textbanner"> -->
          <!-- <img src="https://images.zoomoffices.com/cnImages/index/index-01-words.png" alt="" srcset="" class="bannerImg"> -->
        <!-- </div> -->
      <img src="../../assets/img/bannerimg.png" alt="" class="bannerImg">
      </div>
      <div class="TextBox">
        <!-- <h3 class="text">为什么要直联业主</h3>
        <h3 class="msg">告别信息不透明</h3> -->
        <div class="ownerBox">
          <div class="recommend_box">
            <h3 class="title">直联业主找房（推荐）</h3>
            <ul class="list">
              <li class="listbox" v-for="(item,index) in ownerlist" :key="index">
                <img src="../../assets/img/yes.png" alt="" class="yesImg">
                <span class="text">{{item.label}}</span>
              </li>
              <img src="../../assets/img/recomImg.png" alt="" class="recomImg">
            </ul>
            <el-button class="recomm_btn" @click="FetchHouse">立即找房</el-button>
          </div>
          <div class="plat_box">
            <h3 class="title">委托平台找房</h3>
            <ul class="list">
              <li class="listbox" v-for="(items,index) in platlist" :key="index">
                <img src="../../assets/img/yes.png" alt="" class="yesImg">
                <span class="text">{{items.label}}</span>
              </li>
              <img src="../../assets/img/platImg.png" alt="" srcset="" class="platImg">
            </ul>
            <!-- <div class="platInput"> -->
              <input type="text" v-model="ruleForm.mobile" class="platText" placeholder="请输入11位手机号码" maxlength="11" style="font-size:15px;">
              <el-button class="plat_btn" @click="fetchgethomesubmit">立即委托</el-button>
            <!-- </div> -->
          </div>
        </div>
      </div>

      <div class="officeType">
        <h3 class="text">多种类型办公空间</h3>
        <h3 class="msg">满足不同规模的企业、团队的办公室</h3>
        <img src="../../assets/img/bangong.jpg" alt="" srcset="" class="bangongImg">
      </div>
      
      <div class="contrastBox">
        <ul class="sharelist">
          <h3 class="shareTitle">共享办公</h3>
          <li>自由放松的办公环境</li>
          <li>自由选择租约</li>
          <li>完善的配套设施</li>
          <li>拎包入驻随时办公</li>
        </ul>
        <ul class="iconlist">
          <li class="icontitle">VS</li>
          <li><img src="../../assets/img/iconbox.png" alt="" srcset=""></li>
          <li><img src="../../assets/img/icontext.png" alt="" srcset=""></li>
          <li><img src="../../assets/img/iconhouse.png" alt="" srcset=""></li>
          <li><img src="../../assets/img/iconroom.png" alt="" srcset=""></li>
        </ul>
        <ul class="tranlist">
          <h3 class="tranTitle">传统办公</h3>
          <li>专业独立的办公环境</li>
          <li>中长期租赁保证</li>
          <li>自行出资配置</li>
          <li>自行设计装潢</li>
        </ul>
      </div>

      <div class="roomBox">
        <div class="roomType">
          <h3 class="text">『共享办公』不同房型及特点</h3>
          <ul class="roomlist">
            <li v-for="(item,index) in roomlist" :key="index" @mouseenter="showRoomType(index)" @mouseleave="hideRoomType(index)">
              <img :src="item.src" alt="" class="roomImg">
               <div class="room_text_box1" v-show="CurrentText==0&&index==0">
                <div class="room_text_container">
                  <h3 class="title">开放式工位：</h3>
                  <h4 class="txt">按工位数租赁，弹性工位</h4>
                </div>
              </div>
              <div class="room_text_box2" v-show="CurrentText1==1&&index==1">
                <div class="room_text_container">
                  <h3 class="title">独立单间：</h3>
                  <h4 class="txt">按工位数租赁，固定工位，小型办公室</h4>
                </div>
              </div>
              <div class="room_text_box3" v-show="CurrentText2==2&&index==2">
                <div class="room_text_container">
                  <h3 class="title">超级办公室：</h3>
                  <h4 class="txt">按面积租赁，中大型办公室，拥有属于自己的会议室</h4>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <div class="home_text">
        <h3 class="title">一键租赁 ，不只是简单</h3>
        <p style="font-size:20px;color:#666;margin-top:14px;">告别线下无休止看房 迎接在线VR全景看房</p>
      </div>
      <!-- 视频 -->
      <div class="home_video">
        <video
          id="myvideo"
          controls="controls"
          class="video"
          height="700px;"
          :src="videoSrc"
          :poster="playerOptions.poster"
          @click="videoclick"
          @ended="onPlayerEnded($event)"
          @waiting="onPlayerWaiting($event)"
          @statechanged="playerStateChanged($event)"
        >Your browser does not support the video tag.</video>
      </div>
      <div class="platbox">
        <h3 class="title">房大办公平台服务</h3>
        <ul class="platlist">
          <li v-for="(item,index) in functionlist" :key="index">
            <img src="../../assets/img/loading.gif" alt="平台服务img" class="serviceimg" :data-src="item.src"/>
            <div class="introbox">
              <p class="text">{{item.label}}</p>
              <p class="intro">{{item.intro}}</p>
            </div>
          </li>
          <div style="clear:both;"></div>
        </ul>
      </div>

      <!-- 热门房源 -->
      <div class="hot_housing">
        <h3 class="title">热门房源</h3>
        <ul class="hot_housing_box">
          <li class="hot_housing_detail" v-for="(item,index) in houselist" :key="index" @click="gohouseDetal(item)" @mouseover="ChangBg(index)" @mouseleave="InitBg(index)">
            <img src="../../assets/img/youxuan.png" alt="" class="fdyxImg">
            <img src="../../assets/img/loading.gif" alt="hosueimg" class="hosueimg" :data-house="item.pics_url"/>
            <div class="hot_housing_price">
              <span class="price" style="color:#EFEFEF">{{item.final_price}}</span>
              <span class="price_month">{{item.zh_name}}</span>
            </div>
            <div class="hot_housing_intro">
              <p class="hot_housing_name" v-if="item.building_zh_name">{{item.building_zh_name}}</p>
              <p class="hot_housing_name" v-else>暂无大楼名称</p>
              <p class="hot_housing_addr" v-if="item.zh_addr">{{item.zh_addr}}</p>
              <p class="hot_housing_addr" v-else>暂无地址</p>
            </div>
          </li>
          <div style="clear:both"></div>
        </ul>
      </div>

      <!-- 一口价房源 -->
      <div class="oneprice_housing">
        <h3 class="title">一口价房源</h3>
        <ul class="onepric_housing_box">
          <li class="oneprice_housing_detail" v-for="(item,index) in onepricelist" :key="index" @click="gohouseDetal(item)" @mouseover="ChangBgPrice(index)" @mouseleave="InitBgPrice(index)">
            <img src="../../assets/img/ykj.png" alt="" class="fdyxImg">
            <img src="../../assets/img/loading.gif" alt="hosueimg" class="hosueimg" :data-house="item.pics_url"/>
            <div class="onepric_housing_price">
              <span class="price">{{item.final_price}}</span>
              <span class="prices">{{item.price}}</span>
              <span class="price_month">{{item.zh_name}}</span>
            </div>
            <div class="oneprice_housing_intro">
              <p class="onepric_housing_name" v-if="item.building_zh_name">{{item.building_zh_name}}</p>
              <p class="onepric_housing_name" v-else>暂无大楼名称</p>
              <p class="onepric_housing_addr" v-if="item.zh_addr">{{item.zh_addr}}</p>
              <p class="onepric_housing_addr" v-else>暂无地址</p>
            </div>
          </li>
          <div style="clear:both"></div>
        </ul>
      </div>

      <!-- 企业选择 -->
      <div class="enterprise_selection">
        <h3 class="title">
          <span style="color:#FFDB00;">10,000+</span>大中小企业的选择
        </h3>
        <div class="brand_box">
          <swiper :options="swiperOption" v-if="this.brandlist.length > 1">
            <swiper-slide v-for="(item,index) in brandlist" :key="index">
              <img src="../../assets/img/loading.gif" :data-brand="item.src" class="brand_img">
            </swiper-slide> 
          </swiper>
        </div>
      </div>

       <div class="componany">
          <div class="room_text_box" v-for="(item,index) in componanylist" :key="index">
            <div class="room_text_container">
              <div class="imgbox">
                <img src="../../assets/img/loading.gif" :data-pinglun="item.imgsrc" alt="" srcset="" class="pinglun_img">
              </div>	
              <div class="txtBox">
                <span class="leftCode">“</span>
                <span class="txt">{{item.label}}</span>
                <span class="rightCode">”</span>
              </div>
            </div>
          </div>
        </div>

      <!-- 底部搜索 -->
      <div class="foot_search" v-if="showsearch">
        <div class="searchbox">
          <el-input v-model="sharesobj.keyword" class="foot_search_input" placeholder="请输入办公楼名称/区域/地址" @keyup.enter.native="fetchhouselists">
            <el-button slot="append" icon="el-icon-search" class="foot_btn" @click="fetchhouselists"></el-button>
          </el-input>
        </div>
        <div class="search_condition_box">
          <span class="close" @click="closeFooter">X</span>
          <div class="city">
            <img src="../../assets/img/marker.png" alt="" class="markerImg">
            <div class="citybox">
              <span>区域</span>
              <span v-for="(item,index) in office_citylist" :key="index" class="cityName" @click="choosecity(item,index)" :class="{'actived':curcitys === index}">{{item.zh_name}}</span>
            </div>
          </div>
          <div class="person">
            <div class="personBox">
              <img src="../../assets/img/person.png" alt="" srcset="" class="personImg">
              <span style="font-size:16px;font-weight:bold;" class="people">人数</span>
            </div>
            <div class="citylists">
              <el-slider v-model="PersonRange" :step="1"  :min="0" :max="50" class="changecolor1 peosonSlide"  :class="{'sliderCss':isliderCss}" :disabled='sliderDisabled' @click.native="ChangeBtn"></el-slider>
              <span class="startNum">0</span>
              <span class="endNum">50</span>
              <div class="changecolor2 peopleBtn">
                <button @click="Enableslide(1)" id="btn1" :class="btn == 1 ? 'btnbg':'btnbg2'">51-99人</button>
                <button @click="Enableslides(2)" id="btn2" :class="btn == 2 ? 'btnbg':'btnbg2'">100人以上</button>
                <div style="clear:both;"></div>
              </div>
            </div>
          </div>
        </div>
    </div>

    <div class="searchIconBox" @click="openFooter" v-if="searchshowindex==1" style="width:114px;height:110px;">
      <img src="../../assets/img/searchIcon.png" alt="" class="searchIcon" style="width:114px;height:110px;">
    </div>
    <el-dialog :visible.sync="showEnTrust" :before-close="handleClose" class="entrustBox">
      <div class="dialogTitleBox">
          <span class="title"><img src="../../assets/img/success.png" alt="" class="successImg" align="left">委托成功</span>
      </div>
      <div class="dialogBox">
        <p class="intro">房大专员将在90秒内联系您，请保持电话通畅</p>
        <h3 class="intro_text">简单描述租赁需求：</h3> 
        <textarea type="text" placeholder="例：适合50人团队，直接拎包入驻，靠近地铁站，最好在市中心" class="input_text" v-model="ruleForm.content" style="font-family:'Arial'"></textarea>
        <h4 class="infotext" v-if="showinfotext">请输入需求内容</h4>
      </div>
      <el-row>
        <el-col>
          <el-button type="primary" @click="fetchFindHouse" class="">提交</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    </div>
  </div>
</template>
<script>
import { getprefixcode,getsmscode, getbanner, getCityVideo,gethothouse,gethomesubmit,getchecksmscode,getonePricehouse } from "@/api/homepage";
import { mapActions } from "vuex";
import { getHouselist, getRegionlist, getCitylist } from "@/api/office";
import { videoPlayer } from "vue-video-player";
const TIME_COUNT = 60; //更改倒计时时间
export default {
  name: "Homepage",
   metaInfo: {
    title: "首页",
    meta: [
      {
        name: "keywords",
        content:
          "办公,租赁,房源,生意经,活动,活动详情,帮助,找办公空间,办公环境搜索,办公空间筛选,办公环境"
      },
      {
        name: "description",
        content: "房大办公找办公空间"
      }
    ]
  },
  data() {
    return {
      searchshowindex:1,
      isliderCss:false,
      sliderDisabled:false,
      CurrentText:-1,
      CurrentText1:-1,
      CurrentText2:-1,
      bannerlist: [],
      brandlist:[
        {src:require('../../assets/img/bosch.png')},
        {src:require('../../assets/img/gopro.png')},
        {src:require('../../assets/img/ibm.png')},
        {src:require('../../assets/img/microsoft.png')},
        {src:require('../../assets/img/ugg.png')},
        {src:require('../../assets/img/wework.png')},
        {src:require('../../assets/img/bdft.png')},
        {src:require('../../assets/img/de.png')},
        {src:require('../../assets/img/dgm.png')},
        {src:require('../../assets/img/hfyh.png')},
        {src:require('../../assets/img/jxb.png')},
        {src:require('../../assets/img/lb.png')},
        {src:require('../../assets/img/mtdz.png')},
        {src:require('../../assets/img/rmrb.png')},
        {src:require('../../assets/img/sfsy.png')},
        {src:require('../../assets/img/sn.png')},
        {src:require('../../assets/img/tydq.png')},
        {src:require('../../assets/img/xmly.png')},
        {src:require('../../assets/img/xbk.png')},
        {src:require('../../assets/img/yfjy.png')},
        {src:require('../../assets/img/yw.png')},
        {src:require('../../assets/img/zzc.png')},
      ],
      pageNum:1,
      lists: [],
      cityList: [],
      ind: 1,
      city_name: "",
      radio1: "4",
      btn:0,
      borders: false,
      CurCity: 0,
      curcitys: 0,
      CityId: 5,
      type: 1,
      personnum: 1,
      siledShare:1,
      AreaRange: [0, 0],
      PersonRange:0,
      lowPerson: 1,
      highPerson: 1,
      ind: "-",
      showinfotext:false,
      currentIndex:-1,
      // 懒加载图片
      ownerlist:[   // 业主找房
        {
          label:'点击“立即找房”寻找合适房源'
        },
        {
          label:'直接和房源业主1对1沟通'
        },
        {
          label:'预约看房 全程找房0收费'
        },
      ],
      platlist:[ // 平台找房
        {
          label:'1对1定制租赁需求'
        },
        {
          label:'90秒快速响应'
        },
        {
          label:'委托服务0收费'
        },
      ],
      platText:'',  //委托
      showEnTrust:false,
      roomlist:[
        {
          src:require('../../assets/img/kfgw.jpg')
        },
        {
          src:require('../../assets/img/dlbg.jpg')
        },
        {
          src:require('../../assets/img/jltj.jpg')
        },
      ],
      componanylist:[
        {
          imgsrc:require('../../assets/img/sn.png'),
          label:'选择了房大办公，服务高效，我们只用了三天时间敲定新的办公地点',
        },
        {
          label:'联系房大后，匹配到的办公空间都很准确',
          imgsrc:require('../../assets/img/lb.png')
        },
        {
          label:'已经搬入新的办公室，真实免费，人员跟进很到位，推荐！',
          imgsrc:require('../../assets/img/bosch.png')
        },
        {
          label:'房大帮我们在五个城市都找到了合适的办公室，房源好多！',
          imgsrc:require('../../assets/img/nxc.png')
        },
      ],
      // 视频
      videoSrc: "",
      swiperOptionrecomm: {
        paginationClickable: true,
        slidesPerView: 1,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
          stopOnLastSlide: false,
        },
        loop: true,
        observer: true,
        loopFillGroupWithBlank: true,
        observeParents: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets"
        }
      },
      // 品牌
      swiperOption: {
        paginationClickable: true,
        slidesPerView: 6,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false,
          stopOnLastSlide: false,
        },
        loop: true,
        observer: true,
        loopFillGroupWithBlank: true,
        observeParents: true
      },
      functionlist: [
        {
          src: require("../../assets/img/contactowner.png"),
          label: "直接联系业主",
          intro: "房大办公作为用户和业主之间的桥梁，双方透过平台可以即时沟通、预约看房，获得最新房源报价。"
        },
        {
          src: require("../../assets/img/servicefee.jpg"),
          label: "0%服务费",
          intro:"房大办公通过平台化降低整体成本，为用户提供100%免费服务，我们的收益来自广告及业主方。"
        },
        {
          src: require("../../assets/img/AI.jpg"),
          label: "AI快速匹配",
          intro:"运用房地产AI推荐引擎的新型租赁平台，通过房源推荐器、人工智能算法，多维度筛选房源给到用户，准确率达到80%以上。"
        },
        {
          src: require("../../assets/img/networkhouse.png"),
          label: "全网房源",
          intro:"已为超过45,000家大中小型企业用户提供服务，房源覆盖全球110座城市，覆盖办公面积超过3,000,000m²"
        }
      ],
      cityId:'',
      // 热门城市
      hotcity: [
        {
          src: require("../../assets/img/beijing.png"),
          city_id: "5",
          label: "北京"
        },
        {
          src: require("../../assets/img/shanghai.png"),
          city_id: "3",
          label: "上海"
        },
         {
          src: require("../../assets/img/guangzhou.png"),
          city_id: "4",
          label: "广州"
        },
        {
          src: require("../../assets/img/shenzhen.png"),
          city_id: "1",
          label: "深圳"
        },

        {
          src: require("../../assets/img/chengdu.png"),
          city_id: "12",
          label: "成都"
        },
        {
          src: require("../../assets/img/hangzhou.png"),
          city_id: "28",
          label: "杭州",
          ind: "5"
        },
        {
          src: require("../../assets/img/chongqing.png"),
          city_id: "13",
          label: "重庆"
        },
        {
          src: require("../../assets/img/xianggang.png"),
          city_id: "10",
          label: "香港"
        },
        
        
      ],
      hotCity: [],
      office_citylist: [
        {
          id: "3",
          zh_name: "上海",
          ind: "0"
        },
        {
          id: "5",
          zh_name: "北京",
          ind: "1"
        },
        {
          id: "4",
          zh_name: "广州",
          ind: "2"
        },
        {
          id: "1",
          zh_name: "深圳",
          ind: "3"
        },
        {
          id: "10",
          zh_name: "香港",
          ind: "4"
        },
        {
            id:'12',
            zh_name:'成都',
            ind: "5"
        },
        {
            id:'13',
            zh_name:'重庆',
            ind: "6"
        },
        {
            id:'28',
            zh_name:'杭州',
            ind: "7"
        },
        {
            id:'48',
            zh_name:'南京',
            ind: "8"
        },
        {
            id:'90',
            zh_name:'西安',
            ind: "9"
        },
      ],
      choose_index: 0,
      footimgurl: "",
      playerOptions: {
        start: 0,
        autoplay: true,
        volume: 0.6,
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        playsinline: false,
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [
          {
            type: "video/mp4",
            src: ""
          }
        ],
        poster:require('../../assets/img/videobg.jpg'),
        notSupportedMessage: "此视频暂无法播放，请稍后再试"
      },

      // 热门房源列表
      houselist: [],
      // 一口价房源
      onepricelist:[],
      list:[],
      showdemand: true,
      ruleForm: {
        userName: "",
        prefix: "+86",
        mobile: "",
        code: "",
        officeType: "",
        personNum: "",
        cityId: "",
        districtId: "",
        budget: "",
        workId: "",
        content:'',
      },
      citylists: [],
      regionlist: [],
      disableds: true,
      disabledrent: false,
      phonenumber: "1",
      isshow:'none',
      options: [],
      // 获取验证码
      show: true, // 初始启用按钮
      count: "", // 初始化次数
      timer: null,
      userNameError:'',
      mobileError:'',
      prefixError:'',
      subError:'',
      sharesobj:{
        type:'1',
        cityid:'',
        lowPerson:'1',
        highPerson:'',
        ind:'-',
        city_name:'',
        lowArea:'',
        highArea:'',
        keyword:''
      },
      tranditionobj:{
        type:'2',
        cityid:'',
        lowArea:'',
        highArea:'',
        ind:'-',
        city_name:'',
        keyword:''
      },
      showsearch:false,
    };
  },
  created(){
    this.$root.goIndex=0
  },
  updated(){
    if(this.ruleForm.mobile!= ""&&this.ruleForm.userName!=""&&this.ruleForm.prefix!=''&&this.ruleForm.code!=''){
      this.disableds=false
    }else{
      this.disableds=true
    }
  },
  methods: {
    ...mapActions(['GetSearch']),
    closeFooter(){
      this.searchshowindex=1;
      document.getElementsByClassName('foot_search')[0].setAttribute('class','foot_search animated fadeOutLeft');
      document.getElementsByClassName('searchIconBox')[0].setAttribute('class','searchIconBox animated fadeInLeft');
    },
    openFooter(){
      this.showsearch = true;
      this.searchshowindex=0;
      document.getElementsByClassName('foot_search')[0].setAttribute('class','foot_search animated fadeInLeft');
      document.getElementsByClassName('searchIconBox')[0].setAttribute('class','searchIconBox animated fadeOutLeft');
    },
    goUrl(item){
      window.location.href= item.go_url
    },
    Enableslide(index){
      this.sliderDisabled=true;
      this.isliderCss=true;
      this.btn = 1;
      this.sharesobj.lowPerson = 50;
      this.sharesobj.highPerson = 100;
      this.siledShare = 1;
    },
    Enableslides(){
      this.sliderDisabled=true;
      this.isliderCss=true;
      this.btn = 2;
      this.sharesobj.lowPerson = 100;
      this.sharesobj.highPerson = 1000;
      this.siledShare = 1;
    },
    ChangeBtn(){
      this.sliderDisabled=false;
      this.isliderCss=false;
      this.btn = 3;
    },
    LazyLoading(){
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      let serviceImgs = document.getElementsByClassName('serviceimg');
      let cityImgs = document.getElementsByClassName('cityimg');
      let workImgs = document.getElementsByClassName('workimg');
      let hosueImgs = document.getElementsByClassName('hosueimg');
      let brandImgs = document.getElementsByClassName('brand_img');
      let pinglunImgs = document.getElementsByClassName('pinglun_img');
      let windowHeight = window.innerHeight;
      for(let i = 0; i < serviceImgs.length;i++){
        let serviceImgsHeight = serviceImgs[i].offsetTop;
        if(serviceImgsHeight < windowHeight + scrollTop){
          serviceImgs[i].src = serviceImgs[i].getAttribute('data-src');
        }
      };
      for(let c = 0; c < cityImgs.length;c++){
        let cityImgsHeight = cityImgs[c].offsetTop;
        if(cityImgsHeight < windowHeight + scrollTop){
          cityImgs[c].src = cityImgs[c].getAttribute('data-city');
        }
      };
      for(let w = 0; w < workImgs.length;w++){
        let workImgsHeight = workImgs[w].offsetTop;
        if(workImgsHeight < windowHeight + scrollTop){
          workImgs[w].src = workImgs[w].getAttribute('data-work');
        }
      };
      for(let h = 0; h < hosueImgs.length;h++){
        let hosueImgsHeight = hosueImgs[h].offsetTop;
        if(hosueImgsHeight < windowHeight + scrollTop){
          hosueImgs[h].src = hosueImgs[h].getAttribute('data-house');
        }
      };
      for(let j = 0; j < brandImgs.length;j++){
        let brandHeight = brandImgs[j].offsetTop;
        if(brandHeight < windowHeight + scrollTop){
          brandImgs[j].src = brandImgs[j].getAttribute('data-brand');
        }
      };
      for(let j = 0; j < pinglunImgs.length;j++){
        let pinglunHeight = pinglunImgs[j].offsetTop;
        if(pinglunHeight < windowHeight + scrollTop){
          pinglunImgs[j].src = pinglunImgs[j].getAttribute('data-pinglun');
        }
      };
    },

    showmarks(index) {
      this.ind = index;
    },

    showRoomType(index){
      if(index==0){
        this.CurrentText = 0;
        this.CurrentText1 = -1;
        this.CurrentText2 = -1;
        // document.getElementsByClassName('room_text_box1')[0].setAttribute('class','room_text_box1 animated fadeInUp');
      }
      else if(index==1){
        this.CurrentText = -1;
        this.CurrentText1 = 1;
        this.CurrentText2 = -1;
        // document.getElementsByClassName('room_text_box2')[0].setAttribute('class','room_text_box2 animated fadeInUp');
      }
      else if(index==2){
        this.CurrentText = -1;
        this.CurrentText1 = -1;
        this.CurrentText2 = 2;
        // document.getElementsByClassName('room_text_box3')[0].setAttribute('class','room_text_box3 animated fadeInUp');
      }
 
    },
    hideRoomType(index){ 
      this.CurrentText = -1;
      this.CurrentText1 = -1;
      this.CurrentText2 = -1;
    },
    FetchHouse(){
      this.sharesobj.cityid = this.CityId;
      this.sharesobj.type = 0;
      window.localStorage.setItem("type", this.sharesobj.type);
      // window.sessionStorage.setItem('city',res.data.data.selected_city_name);
      window.localStorage.setItem("city", window.sessionStorage.getItem('city'));
      window.localStorage.setItem("cityId", this.CityId);
      let routeData = this.$router.resolve({path: "/home/office/" +  this.CityId});
      window.open(routeData.href, '_blank');
    },

    choosecity(tag,index) {
      this.CurCity = index;
      this.CityId = tag.id;
      this.sharesobj.cityid = tag.id;
      this.sharesobj.type = 1;
      this.sharesobj.city_name = tag.zh_name;
      if(this.btn == 1){
        this.sharesobj.lowPerson = 51;
        this.sharesobj.highPerson = 99;
        var reqParams = {
          cityId: Number(this.CityId),
          type: Number(this.sharesobj.type),
          page: this.pageNum,
          lowPerson: this.sharesobj.lowPerson,
          highPerson:this.sharesobj.highPerson,
          keyword: this.sharesobj.keyword
        }
      }else if(this.btn == 2){
        this.sharesobj.lowPerson = 100;
        this.sharesobj.highPerson = 200;
        var reqParams = {
          cityId: Number(this.CityId),
          type: this.sharesobj.type,
          page: this.pageNum,
          lowPerson: this.sharesobj.lowPerson,
          highPerson:this.sharesobj.highPerson,
          keyword: this.sharesobj.keyword
        }
      }else if(this.PersonRange != 0){
        if(this.PersonRange>=1&&this.PersonRange<=5){
          
          this.sharesobj.lowPerson=1;
          this.sharesobj.highPerson=5;
        }
        else if(this.PersonRange>=6&&this.PersonRange<=10){
          this.sharesobj.lowPerson = 6;
          this.sharesobj.highPerson=10;
        }
        else if(this.PersonRange>=11&&this.PersonRange<=20){
          this.sharesobj.lowPerson = 11;
          this.sharesobj.highPerson=20;
        }
        else if(this.PersonRange>=21&&this.PersonRange<=30){
          this.sharesobj.lowPerson = 21;
          this.sharesobj.highPerson=30;
        }
        else if(this.PersonRange>=31&&this.PersonRange<=50){
          
          this.sharesobj.lowPerson = 31;
          this.sharesobj.highPerson=50;
        }
        var reqParams = {
          cityId: Number(this.CityId),
          type: this.sharesobj.type,
          page: this.pageNum,
          lowPerson: this.sharesobj.lowPerson,
          highPerson:this.sharesobj.highPerson,
          keyword: this.sharesobj.keyword
        }
      }else if(this.PersonRange == 0){
        this.sharesobj.lowPerson = 0;
        this.sharesobj.highPerson = 0;
        var reqParams = {
          cityId: Number(this.CityId),
          type: this.sharesobj.type,
          page: this.pageNum,
          lowPerson: this.sharesobj.lowPerson,
          highPerson:this.sharesobj.highPerson,
          keyword: this.sharesobj.keyword
        }
      }
          this.$store.dispatch('GetSearch',this.sharesobj);
          window.localStorage.setItem("lowPerson", this.sharesobj.lowPerson);
          window.localStorage.setItem("highPerson", this.sharesobj.highPerson);
          window.localStorage.setItem("type", this.sharesobj.type);
          window.localStorage.setItem("city", this.sharesobj.city_name);
          window.localStorage.setItem('cityId',this.CityId)
          window.localStorage.setItem('pageNum',1)
          window.localStorage.setItem('positionId',0)
          window.localStorage.setItem('positionType',0)
          window.localStorage.setItem('lowPrice',0)
          window.localStorage.setItem('highPrice',0)
          window.localStorage.setItem('lowArea',0)
          window.localStorage.setItem('highArea',0)
          window.localStorage.setItem('keyword','')
          setTimeout(() => {
            this.$root.active_index=1
            this.$router.push({path: "/home/office/" +  this.CityId}); 
          }, 500);
    },
    choosecitys(tag, index) {
      this.CityId = tag.id;
      this.curcitys = index;
      this.tranditionobj.cityid = tag.id;
      this.tranditionobj.type = 2;

      this.tranditionobj.city_name = tag.zh_name;

      window.localStorage.setItem("lowArea", this.AreaRange[0]);
      window.localStorage.setItem("highArea", this.AreaRange[1]);
      window.localStorage.setItem("type", this.tranditionobj.type);
      window.localStorage.setItem("city", this.tranditionobj.city_name);
      // window.sessionStorage.setItem("houses", res.data.data);
      window.localStorage.setItem('cityId',this.CityId)
      window.localStorage.setItem('pageNum',1)
      window.localStorage.setItem('positionId',0)
      window.localStorage.setItem('positionType',0)
      window.localStorage.setItem('lowPrice',0)
      window.localStorage.setItem('highPrice',0)
      window.localStorage.setItem('lowPerson',0)
      window.localStorage.setItem('highPerson',0)
      window.localStorage.setItem('keyword','')
      setTimeout(() => {
        this.$root.active_index=1
        this.$router.push({path: "/home/office/" +  this.CityId}); 
      }, 500);
    
    },
    videoclick() {
      var video = document.getElementById("myvideo");
      this.controls = true;
      // mixpanel.track('Video play')
      if (video.paused) {
        video.play();
      } else {
        video.pause();
      }
    },
    onPlayerEnded(player) {},
    onPlayerWaiting(player) {},
    playerStateChanged(playerCurrentState) {},
    onPlayerWaiting(player) {},
    // banner
    fetchBanner() {
      var reqParams = {
        // city_name: this.city_name
      };
      getbanner(reqParams).then(res => {
          if (res.data.code == 0){
            this.CityId = res.data.data.selected_city_id;
            this.bannerlist = res.data.data.banner_data;
            window.sessionStorage.setItem('city',res.data.data.selected_city_name);
          }else{
            this.$message.error(res.data.msg )
          }
        })
        .catch(error => {
          // this.$message.error("查询banner失败");
        });
    },

    // 国家视频城市
    fetchCityVideo() {
      getCityVideo()
        .then(res => {
          if (res.data.code == 0) {
            this.videoSrc = res.data.data.video_url;
            this.lists = res.data.data.city_on_banner;
            this.cityList = res.data.data.city_on_banner;
            this.hotCity = res.data.data.hot_city;
          }else{
            this.$message.error(res.data.msg )
          }
        })
        .catch(error => {
          // this.$message.error("查询视频失败！");
        });
    },

    // 获取热门城市房源
    fetchHotCity() {
      var reqparams = {
        city_id: this.CityId
      };
      gethothouse(reqparams)
        .then(res => {
          if (res.data.code == 0) {
            this.list = res.data.data.hothouse_data;
            this.houselist = res.data.data.hothouse_data;
          }else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(error => {
        });
    },

    // 获取一口价房源
    fetchOnePrice() {
      for(let i = 0;i<this.hotcity.length;i++){
        if(this.city_name == this.hotcity.label){
          this.city_name =  this.hotcity[i].city_id;
        }
      }
      var reqparams = {
        city_id: this.CityId
      };
      getonePricehouse(reqparams).then(res => {
          if (res.data.code == 0) {
            this.onepricelist = res.data.data.onePriceHouse_data;
          }
        })
        .catch(error => {
          // this.$message.error("查询热门城市失败！");
        });
    },

    // 手机号前缀
    fetchprefix() {
      getprefixcode()
        .then(res => {
          if (res.data.code == 0) {
            this.options=res.data.data
            // res.data.data.forEach(item => {
            //   this.options.push({ label: item });
            // });
          }else{
            this.$message.error(res.data.msg )
          }
        })
        .catch(error => {
        });
    },

    fetchsmscode() {
      // 短信验证码
      var reqParams = {
        prefix: this.ruleForm.prefix,
        mobile: this.ruleForm.mobile
      };
      getsmscode(reqParams).then(res => {
          if (res.data.code == 0) {
          }else{
            this.$message.error(res.data.msg )
          }
        })
        .catch(error => {
        });
    },

    // 验证短信验证码
    checksmscode() {
      var reqParams = {
        mobile: this.ruleForm.mobile,
        code: this.ruleForm.code
      };
      getchecksmscode(reqParams).then(res => {
          if (res.data.code == 0) {
            this.fetchgethomesubmit()
          } else{
            this.subError = res.data.msg
          }
        })
        .catch(error => {});
    },

    // 提交专员
    fetchgethomesubmit() {
      var reqParams = {
        mobile: this.ruleForm.mobile,
        userName: "XXX",
        media_id:"1",
        referrer:document.referrer,
      };
      gethomesubmit(reqParams)
        .then(res => {
          if (res.data.code == 0) {
            this.$message.success("提交成功!");
            setTimeout(() => {
              this.showEnTrust = true;
            }, 1000);
          }else{
            this.$message.error(res.data.msg )
          }
        })
        .catch(error => {
          // this.$message.error("提交失败！请重试！");
        });
    },

    // 委托找房
    fetchFindHouse() {
      if(this.ruleForm.content == ''){
        this.showinfotext = true;
        return
      }
      var reqParams = {
        mobile: this.ruleForm.mobile,
        content: this.ruleForm.content,
      };
      gethomesubmit(reqParams).then(res => {
          if (res.data.code == 0) {
            this.$message.success("提交成功!");
              this.showEnTrust = false;
              this.showinfotext = false;
              this.ruleForm.mobile = '';
          }else{
            this.showinfotext = true;
            this.$message.error(res.data.msg )
          }
        })
        .catch(error => {
          // this.$message.error("提交失败！请重试！");
        });
    },

    fetchRoomType() {
      var reqParams = {
        userName: this.ruleForm.userName,
        mobile: this.ruleForm.mobile,
        officeType: this.ruleForm.officeType,
        personNum: this.ruleForm.personNum,
        cityId: this.ruleForm.cityId,
        districtId: this.ruleForm.districtId,
        budget: this.ruleForm.budget,
        workId: this.ruleForm.workId
      };
      gethomesubmit(reqParams).then(res => {
          if (res.data.code == 0) {
            this.$message.success("提交成功!");
            setTimeout(() => {
              this.showcommit = 2;
            }, 1000);
          }else{
            this.$message.error(res.data.msg)
          }
        })
        .catch(error => {
          // this.$message.error(res.msg);
        });
    },

    gocityDetal(params,item) {
          window.localStorage.setItem("lowArea", 0);
          window.localStorage.setItem("highArea", 0);
          window.localStorage.setItem("type", 1);
          window.localStorage.setItem("city", item.label);
          window.localStorage.setItem('cityId',params)
          window.localStorage.setItem('pageNum',1)
          window.localStorage.setItem('positionId',0)
          window.localStorage.setItem('positionType',0)
          window.localStorage.setItem('lowPrice',0)
          window.localStorage.setItem('highPrice',0)
          window.localStorage.setItem('lowPerson',0)
          window.localStorage.setItem('highPerson',0)
          window.localStorage.setItem('keyword','')
          this.$root.active_index=1
         window.localStorage.setItem('active_index',1)
      this.$router.push({ path: "/home/office/" + params });
    },

    gohouseDetal(params) {
      let cityid = params.city_id;
      let building_id = params.building_id;
      this.$root.active_index=1
       window.localStorage.setItem('active_index',1)
      this.$router.push({ path: "/home/office/" + cityid + "/" + building_id });
    },
    changeuserName(){
        if(this.ruleForm.userName==''){
          this.userNameError="请输入姓名！";
        }else{
          this.userNameError="";
        }
    },
    
    changemobile(){
       if(!/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.ruleForm.mobile)){
          this.mobileError="请输入11位正确的手机号码";
          this.ruleForm.mobile=''
       }else{
          this.mobileError="";
       }
    },
    // 获取验证码
    send() {
      if(this.ruleForm.mobile!= ""&&this.ruleForm.userName!=""&&this.ruleForm.prefix!=''){
          if (!this.timer) {
            this.count = TIME_COUNT;
            this.show = false;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                this.show = true;
                clearInterval(this.timer); // 清除定时器
                this.timer = null;
              }
            }, 1000);
          }
          this.fetchsmscode();
      }else{
          if (this.ruleForm.mobile == "") {
              this.mobileError="请输入手机号！";
          }else{
                this.mobileError="";
          }
          if (this.ruleForm.userName == "") {
              this.userNameError="请输入姓名！";
          }else{
              this.userNameError="";
          }
          if (this.ruleForm.prefix == "") {
              this.prefixError="请输入手机区域！";
          }else{
              this.prefixError="";
          }
      }
    },

    // 请求城市列表
    fetchCitylist() {
      var reqParams = {
        city_name: this.city_name
      }
      getHouselist(reqParams)
        .then(res => {
          if (res.data.code == 0) {
            this.citylists = res.data.data.city_info;
          }else{
            this.$message.error(res.data.msg )
          }
        })
        .catch(error => {
          this.$message.error("查询城市失败！");
        });
    },

    fetchRegion(params) {
      var reqParams = {
        city_id: params
      };
      getRegionlist(reqParams)
        .then(res => {
          if (res.data.code == 0) {
            this.regionlist = res.data.data.district_info;
          }
        })
        .catch(error => {
          this.$message.error("查询区域失败！");
        });
    },

    fetchdata() {
      this.fetchCityVideo();
      this.fetchHotCity();
      this.fetchOnePrice();
    },

    fetchhouselist() {
      if (this.type == 1) {
        var reqParams = {
          cityId: Number(this.CityId),
          type: JSON.stringify(this.type),
          page: this.pageNum,
          lowPerson: Number(this.sharesobj.lowPerson),
          highPerson: Number(this.PersonRange),
          keyword: this.sharesobj.keyword
        };
      } else {
        this.tranditionobj.lowArea = this.AreaRange[0];
        this.tranditionobj.highArea = this.AreaRange[1];
        var reqParams = {
          cityId: Number(this.CityId),
          type: JSON.stringify(this.type),
          page: this.pageNum,
          lowArea: Number(this.tranditionobj.lowArea),
          highArea: Number(this.tranditionobj.highArea),
          keyword: this.sharesobj.keyword
        };
      }
      getCitylist(reqParams).then(res => {
        if (res.data.code == 0) {
          let city = this.CityId;
          var localobj = new Object();
          if (this.type == 1) {
            localobj.cityId = this.CityId;
            localobj.type = this.type;
            localobj.lowPerson = this.lowPerson;
            localobj.highPerson = this.highPerson;
            localobj.keyword = this.sharesobj.keyword;
            localobj.ind = this.ind;
            if (res.data.data.building_info.length != 0) {
              localobj.price = res.data.data.building_info[0].price;
            } else {
              localobj.price = "";
            }
          } else {
            localobj.cityId = this.CityId;
            localobj.type = this.type;
            localobj.lowArea = this.lowArea;
            localobj.highArea = this.highArea;
            localobj.keyword = this.tranditionobj.keyword;
            localobj.ind = this.ind;
            if (res.data.data.building_info.length != 0) {
              localobj.price = res.data.data.building_info[0].price;
            } else {
              localobj.price = "";
            }
          }
          window.sessionStorage.setItem("localobj", JSON.stringify(localobj));
          window.sessionStorage.setItem("houses", JSON.stringify(res.data.data));
          this.$root.active_index=1
          window.localStorage.setItem('active_index',1)
          this.$router.push({ path: "/home/office/" + city });
        }else{
          this.$message.error(res.data.msg )
        }
      });
    },
    fetchhouselists(){
      if(this.sharesobj.keyword.replace(/^ +| +$/g,'')==''){
          this.$message.error('搜索内容不能为空');
          return
      }
      window.localStorage.setItem('keyword',this.sharesobj.keyword)
      window.localStorage.removeItem('city')
      window.localStorage.setItem('cityId',0)
      window.localStorage.setItem('type',0)
      window.localStorage.setItem('pageNum',1)
      window.localStorage.setItem('positionId',0)
      window.localStorage.setItem('positionType',0)
      window.localStorage.setItem('lowPrice',0)
      window.localStorage.setItem('highPrice',0)
      window.localStorage.setItem('lowArea',0)
      window.localStorage.setItem('highArea',0)
      window.localStorage.setItem('lowPerson',0)
      window.localStorage.setItem('highPerson',0)
      this.$root.active_index=1
      window.localStorage.setItem('active_index',1)
      this.$router.push({ path: "/home/office/3",query:{searchIndex:1}} );
    },


    ChangBg(index){
      var imgfooter = document.getElementsByClassName('hot_housing_intro')[index];
      imgfooter.style.cssText = "background:#FFE300"
    },
    InitBg(index){
      var imgfooter = document.getElementsByClassName('hot_housing_intro')[index];
      imgfooter.style.cssText = "background:#f9f9f9"
    },

    ChangBgPrice(index){
      var imgfooter = document.getElementsByClassName('oneprice_housing_intro')[index];
      imgfooter.style.cssText = "background:#FFE300"
    },
    InitBgPrice(index){
      var imgfooter = document.getElementsByClassName('oneprice_housing_intro')[index];
      imgfooter.style.cssText = "background:#f9f9f9"
    }
  },
  computed: {
    CarouselStyle() {
      return {
        width: "100%",
        height: "680px"
      };
    },
    OfficeStyle() {
      return {
        width: "579px",
        height: "90px",
        marginBottom: "10px"
      };
    },
    CityStyle() {
      return {
        display: "inline-block",
        width: "80px",
        color: "#333",
        margin: "15px 0px 0px 15px"
      };
    },

    swiper() {
      return this.$refs.mySwiper.swiper;
    },

    slideStyle() {
      return {
        color: "#FFE300",
        width: "410px",
        marginLeft: "26px"
      };
    }
  },
  mounted() {
    window.addEventListener('scroll',this.LazyLoading,true);
    // if(window.sessionStorage.getItem('city')&&window.sessionStorage.getItem('banner')){
    //   this.bannerlist = JSON.parse(window.sessionStorage.getItem('banner'));
    // }else{
    //   this.getCurrentCity();
    // }
    this.fetchBanner();
    this.fetchprefix();
    setTimeout(() => {
      this.fetchdata();
    }, 1100);
    var imgbox = document.getElementsByClassName('hot_housing_detail');
    var imgfooter = document.getElementsByClassName('hot_housing_intro');
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";
@import "./homepage.scss";
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #ffe300;
}
</style>
<style lang="scss">
.home_page {
  .changecolor1 {
    width: 500px;
    .el-slider__bar {
      background-color: #ffe300;
    }
    .el-slider__button {
      width: 10px;
      height: 24px;
      border-radius: 5px;
      background-color: #ffe300;
      border: 2px solid #ffe300;
    }
  }
  .changecolor2 {
    .el-radio-button__inner:hover {
      color: #141414;
    }
    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background-color: #ffe300;
      border-color: #ffe300;
      color: #141414;
    }
  }
  .sliderCss .el-slider__bar {
    background-color: #e4e7ed;
    }
  .sliderCss .el-slider__button {
    width: 10px;
    height: 24px;
    border-radius: 5px;
    background-color: #e4e7ed;
    border: 2px solid #e4e7ed;
  }
  .swiper-pagination-bullet{
    width: 50px;
    height: 6px;
    background: #fff;
    border-radius: 0%;
    opacity: 0.8;
  }
  .swiper-pagination-bullet-active{
    width: 50px;
    height: 6px;
    background: #FFE300;
    border-radius: 0%;
    opacity: 1;
  }
  .el-dialog{
    width: 400px;
    height: 400px;
  }
}
</style>

